<script lang="ts" setup>
  import { useRouter } from 'vue-router';
  import { useCityStore } from '@/store';
  import type { CityStoreState } from '@/types/store';

  const props = defineProps({
    cityId: {
      type: String,
      default: '',
    },
    cityName: {
      type: String,
      default: '',
    },
  });

  const cityStore = useCityStore();

  const router = useRouter();

  function onCityClick({ cityId, cityName }: Omit<CityStoreState, 'field'>) {
    cityStore.setCityId(cityId);
    cityStore.setCityName(cityName);
    cityStore.syncStore();
    router.push('/');
  }
</script>

<template>
  <div class="city-item">
		<span
      class="city"
      @click="onCityClick({ cityId, cityName })"
    >
      {{props.cityName}}
    </span>
	</div>
</template>
